<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="description" content="easy flight">
<meta name="author" content="jt">
<link rel="icon" href="/resources/favicon.ico">
<title>easy flight</title>
<link href="/resources/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>
<link href="/resources/css/main.css" rel="stylesheet">
</head>
<body>
<jsp:include page="../inc/header.jsp" />

<div class="container">
    <div class="row">
        <form id="av_form" action="#">
                <div class="col-sm-5">
                    <textarea rows="13" class="form-control" name="av" id="av">
                    </textarea>
                </div>
        </form>
        <div class="col-sm-2">
            <div class="row">
                <button id="add_av" class="btn btn-primary">添加</button>
            </div>
            <p></p>

            <div class="row">
                <button id="single" class="btn btn-primary">示例</button>
            </div>

        </div>
    </div>

    <hr />
    <div class="row">
        <form action="#" id="query_form" class="form-inline">
            <%--<div class="form-group">--%>
            <%--<label for="queryCondInput">条件</label>--%>
            <%--<input type="text" name="xxx" class="form-control" id="queryCondInput">--%>
            <%--</div>--%>
            <div class="form-group">
                <label for="pageNumberInput">页数</label>
                <input type="text" name="pageNumber" class="form-control" id="pageNumberInput" value="1">
            </div>
            <div class="form-group">
                <label for="pageSizeInput">每页</label>
                <input type="text" name="pageSize" class="form-control" id="pageSizeInput" value="10">
            </div>
            <div class="form-group">
                <button id="query_av" class="btn btn-primary">查询</button>
            </div>
        </form>
    </div>
    <hr />
    <div class="row">
        <table class="table table-bordered" id="av_list">
            <tr>
                <td>航司</td>
                <td>航班</td>
                <td>出发</td>
                <td>到达</td>
            </tr>
            <tr data-template>
                <td>{{carrier}}</td>
                <td>{{flightNumber}}</td>
                <td>{{depAirport}}</td>
                <td>{{arrAirport}}</td>
            </tr>

        </table>
    </div>

</div>

<jsp:include page="../inc/footer.jsp" />

<script type="text/javascript" src="/resources/js/jquery.js" charset="UTF-8"></script>
<script type="text/javascript" src="/resources/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/resources/js/tempo.js" charset="UTF-8"></script>
<script>
    function reloadAv() {
        $.ajax({
            url: "/av/query",
            type: "POST",
            timeout: 5000,
            dataType: "json",
            success: function (data) {
                Tempo.prepare('av_list').render(data.list);
            }
        });
    }

    function queryAv() {
        $.ajax({
            url: "/av/query",
            dataType: "json",
            success: function (data) {
                $("#av").text(JSON.stringify(data.list[0], null, "  "));
            }
        });
    }

    $(function () {
        reloadAv();
        $('#query_av').click(function () {
            reloadAv();
        });

        $("#single").click(function () {
            queryAv();
        });


        //添加
        $('#add_av').click(function () {
            $.ajax({
                url: "/av/add",
                type: "post",
                data: $('#av').val(),
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        reloadAv();
                    } else {
                        alert(data.msg);
                    }
                }

            });
        })
    });
</script>
</body>
</html>
